import React, {memo, useEffect, useState} from 'react';

//一个函数式组件中可以存在多个useEffect，将逻辑代码进行拆分, 并且多个effect按照定义顺序依次执行;
//Hook 允许我们按照代码的用途分离它们，而不需要像生命周期函数那样;
const App = memo(() => {
  const [counter, setCounter] = useState(0);

  //1.修改document的title
  useEffect(() => {
    document.title = counter;
  });

  //2.对redux中数据变化进行监听
  useEffect(() => {
    console.log("监听redux")
    return () => {
      console.log("取消监听redux")
    }
  })

  //3.监听eventBus中的事件
  useEffect(() => {
    console.log("监听eventBus")
    return () => {
      console.log("取消监听eventBus")
    }
  })

  return (
      <div>
        <h2>当前计数：{counter}</h2>
        <button onClick={() => setCounter(counter + 1)}>+1</button>
      </div>
  );
});

export default App;